<template>
	<div id="map" class="map"></div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import 'ol/ol.css'
	import { OverviewMap, defaults as defaultControls } from 'ol/control'

	import createWMTSMap from '@/utils/map/createMap'

	let map = ref(null)

	const { creatMap, tiandituInit } = createWMTSMap()
	const { layer_Base, layer_Note } = tiandituInit(0, '40e50cca6823476482e8721bb2eee900')
	const overviewMapControl = new OverviewMap({
		className: 'ol-overviewmap ol-custom-overviewmap',
		layers: [layer_Base, layer_Note],
		collapseLabel: '\u00BB',
		label: '\u00AB',
		collapsed: false
	})

	const initMap = () => {
		map.value = creatMap(0, '40e50cca6823476482e8721bb2eee900')
		map.value.addControl(overviewMapControl)
		console.log(map.value)
	}

	onMounted(() => {
		initMap()
	})
</script>

<style>
	#map {
		width: 100%;
		height: 100%;
	}
	.map .ol-custom-overviewmap,
	.map .ol-custom-overviewmap.ol-uncollapsible {
		bottom: auto;
		left: auto;
		bottom: 0;
	}

	.map .ol-custom-overviewmap:not(.ol-collapsed) {
		border: 1px solid black;
	}

	.map .ol-custom-overviewmap .ol-overviewmap-map {
		border: none;
		width: 270px;
	}

	.map .ol-custom-overviewmap .ol-overviewmap-box {
		border: 2px solid orange;
	}

	.map .ol-custom-overviewmap:not(.ol-collapsed) button {
		bottom: auto;
		left: auto;
		right: 1px;
		top: 1px;
	}

	.map .ol-rotate {
		top: 170px;
		right: 0;
	}
</style>
